<template>
    <main-layout :showHome="!isFromList" :showBack="isFromList" :title="`${isEdit ? '修改' : '新增'}采购订单`">
        <!-- 如果表单没有出现错误，那么会触发submit事件回调 -->
        <div class="form-box">
            <van-form @submit="onSubmit">
                <div class="title">基本信息</div>
                <van-field v-model="pageData.createName"
                    label="创建人"
                    readonly/>
                <van-field v-model="pageData.createTime"
                    label="创建时间"
                    placeholder="选择创建时间"
                    readonly
                    :rules="[{ required: true, message: '选择创建时间' }]">
                    <!-- <template v-slot:button> -->
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="timeShow = true" native-type="button">选择创建时间</van-button>
                    </template>
                </van-field>
                
                <div class="title">审批信息</div>
                <van-field v-model="pageData.liableName"
                    label="审批人"
                    placeholder="选择审批人"
                    readonly
                    :rules="[{ required: true, message: '选择审批人' }]">
                    <!-- <template v-slot:button> -->
                    <template #button>
                        <van-button size="small" type="primary" color="#ff5b02" @click="personShow = true" native-type="button">选择审批人</van-button>
                    </template>
                </van-field>
                <van-field v-model="pageData.remark"
                    label="备注"
                    placeholder="输入备注"/>
                <div style="margin: 12px 0;">
                    <!-- 在表单中使用native-type来指定按钮的具体功能,submit是提交表单的意思 -->
                    <van-button block type="info" native-type="submit" color="#ff5b02">提交</van-button>
                </div>
            </van-form>
        </div>

        <van-calendar v-model="timeShow" @confirm="pickTime" />

        <!-- <person-picker :value="personShow" @input="personInput"/> -->
        <!-- v-model 就是利用input元素的value属性和oninput事件来实现的一个vue指令 -->
        <person-picker v-model="personShow" @userPickEvt="userPickEvt"/>
    </main-layout>
</template>

<script>
    import { dateFormat } from '../../util'

    export default {
        data() {
            return {
                isFromList: false,
                isEdit: false,
                pageData: {
                    nextId: '',
                    createId: '',
                    createName: '',
                    createTime: '',
                    projectId: '',
                    projectName: '',
                    materialId: '',
                    materialName: '',
                    materialUnit: '',
                    materialWeight: '',
                    price: '',
                    supplierId: '',
                    supplierName: '',
                    supplierContact: '',
                    supplierPhone: '',
                    remark: ''
                },
                timeShow: false,
                personShow: false
            }
        },

        computed: {
            userInfo() {
                return this.$store.getters['common/userInfo']
            }
        },

        created() {

            this.isFromList = !!this.$route.query.from

            this.isEdit = !!this.$route.query.id

            this.pageData.createId = this.userInfo.id
            this.pageData.createName = this.userInfo.name
        },

        methods: {

            // 模拟实现v-model功能
            personInput(val) {
                this.personShow = val
            },

            // 选择回调
            userPickEvt(user) {
                console.log(user)
            },

            async onSubmit() {
                
            },

            validator(val) {
                return /^1[3-9]{1}[0-9]{9}$/.test(val)
            },

            pickTime(val) {
                this.pageData.createTime = dateFormat(val)
                this.timeShow = false
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../style/common.less';

    .form-box {
        padding: 4px 12px;
        .title {
            display: block;
            font-size: .8rem;
            padding: 10px 0;
        }
    }

    .user-box {
        display: block;
        height: 100%;
        > header {
            display: flex;
            padding: 8px 12px;
            border-bottom: solid 1px @cdd;
            input {
                flex: 1;
                padding: 0;
                outline: none;
                border: none;
                font-size: .7rem;
                color: @c33;
                line-height: 32px;
            }
            button {
                flex: 0 0 68px;
                height: 32px;
                background-color: @primary;
                border: none;
                color: @cff;
                font-size: .7rem;
            }
        }

        > ul {
            display: block;
            padding: 8px 12px;
            height: calc(100% - 49px);
            overflow-x: hidden;
            li {
                border-bottom: solid 1px #ddd;
                font-size: .7rem;
                padding: 10px;
                &:last-child {
                    border-bottom: none;
                }
                &.more {
                    text-align: center;
                    color: @c99;
                }
            }
        }
    }
</style>